.content article {
	padding: 10px 10px 5px 10px;
	margin: 10px 10px 0 0;
	border-radius: 3px;

	h1 {
		font-size: 1.2em;
		margin: 0 0 15px 0;
		border-bottom: solid 1px color(black alpha(0.2));
	}

	section {
		margin-bottom: 15px;

		h2 {
			font-size: 0.9em;
			line-height: 1em;
			margin: 0 0 2px 0;
		}

		ul {
			font-size: 0.8em;
			line-height: 1em;
			list-style: none;
			margin: 0;

			li a {
				text-decoration: none;
				display: block;
				padding: 2px;

				&:hover {
					text-shadow: 1px 1px 0 #000;
					border-radius: 3px;
				}
			}
		}
		h2.deactivate,
		a.deactivate,
		a.old-version {
			opacity: 0.3;
		}
		a.removed {
			text-decoration: line-through;
		}
	}
}

.filter-search .selectize-dropdown-content {
	padding: 0 2px;

	.option {
		border-left-style: solid;
		border-left-width: 6px;
	}
}

.selectors {
	--color: #FFDD3A;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.attributes {
	--color: #FF7B3A;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.manipulation {
	--color: #E449A1;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.traversing {
	--color: #AF4FDD;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.events {
	--color: #507BD5;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.effects {
	--color: #1CB1DA;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.ajax {
	--color: #0FD55C;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

.core {
	--color: #9DF417;
	--dark: color(var(--color) lightness(15%));

	&article {
		background: var(--color);

		a {
			color: var(--dark);
			background: none;

			&:hover {
				background: var(--dark);
				color: var(--color);
			}
		}
	}

	&.option {
		border-color: var(--color);
	}
}

